<template>
  <div class="cover">
    <img :src="showImgUrl" alt="" @click="dialogImg" class="IMG" object-fit='cover'>
    <el-dialog
      title="选择封面"
      :visible.sync="dialogVisible"
      width="960px">
      <span>
        <el-tabs type="border-card" v-model='activeName'>
          <el-tab-pane label="素材库" name='pic'>
            <el-radio-group v-model="collect" @change.native='fn'>
              <el-radio-button :label="false">全部</el-radio-button>
              <el-radio-button :label="true">收藏</el-radio-button>
              <el-row :gutter="10">
              <el-col :span="6" v-for="item in PicList" :key='item.id' style="margin-top:10px" @click.native='selectImg(item.url)' >
              <el-image  :src='item.url' style="width:100%; height:180px" fit='cover' :class="{active:selectImgUrl === item.url}"></el-image>
              <!-- 图片 -->
              </el-col>
              </el-row>
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="page"
                  :page-size="per_page"
                  layout="total,  prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
            </el-radio-group>
          </el-tab-pane>
          <el-tab-pane label="上传图片" name='uploadPIC'>
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="upload">
              <img v-if="upLoadUrl" :src="upLoadUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-tab-pane>
        </el-tabs>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click='confirm'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getPictures, upDatePic } from '@/api/pictures'
import fans from '@/mixins/fans'
export default {
  name: 'cover',
  props: ['value'],
  mixins: [fans],
  watch: {
    value () {
      this.showImgUrl = this.value || require('@/assets/default.png')
    }
  },
  created () {
    this.getList()
  },
  data () {
    return {
      activeName: 'pic',
      dialogVisible: false,
      PicList: [],
      collect: false,
      per_page: 8,
      page: 1,
      selectImgUrl: '',
      upLoadUrl: '',
      showImgUrl: this.value || require('@/assets/default.png')
    }
  },
  methods: {
    dialogImg () {
      this.dialogVisible = true
    },
    async getList () {
      const res = await getPictures({
        collect: this.collect,
        page: this.page,
        per_page: this.per_page
      })
      const { total_count, results } = res.data
      this.PicList = results
      this.total = total_count
      // console.log('获取图片信息', res)
    },
    fn () {
      this.getList()
    },
    selectImg (url) {
      // 选择的图片
      this.selectImgUrl = url
    },
    async upload ({ file }) {
      const fd = new FormData()
      fd.append('image', file)
      const res = await upDatePic(fd)
      this.upLoadUrl = res.data.url
      // console.log('上传图片的地址', res)
    },
    // 最终的确定按钮
    confirm () {
      console.log(this.activeName)
      if (this.activeName === 'pic') {
        // 素材库是否有图片
        if (this.selectImgUrl) {
          this.showImgUrl = this.selectImgUrl
        } else {
          return this.$message.warning('请选择一张图片')
        }
      } else {
        // 上传
        if (this.upLoadUrl) {
          this.showImgUrl = this.upLoadUrl
        } else {
          return this.$message.warning('请选择一张图片')
        }
      }
      this.dialogVisible = false
      this.$emit('input', this.showImgUrl)
    }
  }
}
</script>

<style lang='less' scoped>
  .cover{
    .IMG{
      // background-color: sienna;
      width: 160px;
      height: 160px;
      border: 1px dashed #ccc;
    }
    .el-image {
      position: relative;
    }
    .active {
      position: relative;
      &::after {
        content:'';
        position: absolute;
        top: 0px;
        left: 0px;
        width:100%;
        height: 100%;
        background:rgba(0,0,0,.3) url('~@/assets/selected.png') no-repeat center / 80px 80px ;
      }
    }
  }
</style>
